<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{dashboard.title}">Dashboard - SnackMQ Console</title>
</head>
<body>
<section>
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2">
        <h4 class="mb-0" th:text="#{dashboard.cluster.overview}">Cluster Overview</h4>
        <div id="refresh-status" class="text-muted small align-self-center">
            <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
            <span th:text="#{dashboard.live.update}">Live Update</span>
        </div>
    </div>

    <div th:if="${error}" class="alert alert-danger" role="alert" th:text="#{dashboard.error.connecting}">
        Error connecting to cluster.
    </div>

    <div th:if="${overview}" class="row g-4">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body py-4">
                    <h5 class="card-title" th:text="#{dashboard.brokers}">Brokers</h5>
                    <p class="card-text fs-2 fw-bold" id="brokerCount" th:text="${overview.brokerCount}">0</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body py-4">
                    <h5 class="card-title" th:text="#{dashboard.topics}">Topics</h5>
                    <p class="card-text fs-2 fw-bold" id="topicCount" th:text="${overview.topicCount}">0</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body py-4">
                    <h5 class="card-title" th:text="#{dashboard.total.messages}">Total Messages</h5>
                    <p class="card-text fs-2 fw-bold" id="totalMessages" th:text="${overview.totalMessages}">0</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card text-center h-100 shadow-sm border-0">
                <div class="card-body py-4">
                    <h5 class="card-title" th:text="#{dashboard.tps}">TPS</h5>
                    <p class="card-text fs-2 fw-bold" id="tps" th:text="${#numbers.formatDecimal(overview.tps, 1, 2)}">0.00</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 隐藏的i18n字符串，供JavaScript使用 -->
    <div id="i18n-strings" style="display: none;">
        <span data-i18n="dashboard.live.update" th:text="#{dashboard.live.update}">Live Update</span>
        <span data-i18n="dashboard.update.failed" th:text="#{dashboard.update.failed}">Update Failed</span>
    </div>
    
    <th:block th:replace="~{fragments/js/dashboard-js :: js}"></th:block>
</section>
</body>
</html>